<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="/houtai/js/vue.js"></script>
    <script type="text/javascript" src="/houtai/js/jquery-2.1.4.js"></script>

    <link rel="stylesheet" href="/houtai/layuiadmin/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        .leftTitle{
            font-size: 15px;
            font-family: 微软雅黑;
            font-weight: bold;
            margin-right: 30px;
            color:#606266
        }
        .rigthContent{
            color:#606266
        }
        .lineDiv{
            margin-top: 30px;
        }
    </style>
</head>
<body>

<!--------------------------------------头部工具条------------------------------------------>
<script type="text/html" id="headbar">
    <div class="layui-btn-container"  >
        <!--使用表达式让按钮动态显示，if条件为true则显示，false不显示-->
        <!--{{#  if(insert){ }}-->
        <!--<button type="button" class="layui-btn" lay-event="insert">增加-->
            <!--<i class="layui-icon">&#xe654;</i>-->
        <!--</button>-->
        <!--{{#  } }}-->

        <!--判断是否有删除权限-->
<!--        {{#  if(del){ }}-->
<!--        <button class="layui-btn layui-btn-danger" lay-event="getCheckData">批量删除-->
<!--            <i class="layui-icon">&#xe640;</i>-->
<!--        </button>-->
<!--        {{#  } }}-->
    </div>
</script>

<!-------------------------------------------- 每一行工具条 --------------------------------------->
<script type="text/html" id="barDemo">
    <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm" lay-event="singleUpdate">
        <i class="layui-icon">&#xe642;</i> 查看
    </button>

    <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" lay-event="singleDel">
        <i class="layui-icon">&#xe60b;</i> 发货
    </button>
</script>

<!----------------------------------------头部工具条获取复选框数据,未开启----------------------------------->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<!---------------------------------------------条件搜索框------------------------------------------->
<div class="demoTable" style="margin-top: 10px">
    <form id="serachForm" class="layui-form">
        订单编号：
        <div class="layui-inline">
            <input class="layui-input" name="myorderNumber" id="myorderNumber" autocomplete="off">
        </div>
        下单人：
        <div class="layui-inline" style="width: 100px">
            <input class="layui-input" id="username" name="username" autocomplete="off">
        </div>
        <div class="layui-form-item" style="width: 200px;float: left;margin-right: 10px">
            <label class="layui-form-label">订单状态</label>
            <div class="layui-input-block">
                <select name="orderStatus" id="orderStatus" lay-filter="aihao">
                    <option value="-1" selected>全选</option>
                    <option value="0" >待付款</option>
                    <option value="1">待发货</option>
                    <option value="2">发货中</option>
                    <option value="3">待评价</option>
                    <option value="4">取消订单</option>
                    <option value="5">交易完成</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">下单日期</label>
            <div class="layui-input-inline" style="width: 100px">
                <input type="text" name="startDate" id="startDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
            -
            <div class="layui-input-inline" style="width: 100px">
                <input type="text" name="endDate" id="endDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline" style="margin-left: 10px">
            <!--这个地方的不能直接使用button标签，使用button标签会重复提交数据-->
            <input type="button" class="layui-btn" data-type="reload" value="搜索">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>

    </form>
</div>

<!-----------------------------------------表格内容--------------------------------------------->
<div id="content">
    <table class="layui-table"
           lay-data="{url:'/houtai/page/order/list',page:true,limit:10,limits:[10,20,10000],toolbar:'#headbar',
                     height:'full-100',totalRow:true,loading:true,title:'用户信息表',
                     //把返回的数据result转为换layUI需要的格式，此处返回的是mybatisPlus的IPage对象，具体返回值自己设定
                     parseData: function(res){ //res 即为原始返回的数据
                     console.log(res.li);
                        return {
                            'code': res.code, //解析接口状态
                            'msg': res.message, //解析提示文本
                            'count': res.obj.totalSize, //解析数据长度
                            'data': res.li //解析数据列表
                          };
                       },
                //给表格设置一个ID
               id:'test'}"
           lay-filter="filter">
        <thead>
        <tr>
            <!--开起全选框-->
            <th lay-data="{checkbox:true,fixed:'left'}"></th>
            <th lay-data="{field:'myorderId',fixed:'left',hide:true}">订单ID</th>
            <!--把订单编号作为合计行标题-->
            <th lay-data="{field:'myorderNumber',minWidth:110,totalRowText:'合计',fixed:'left'}">订单编号</th>
            <!--返回对象中另一个对象的属性-->
            <th lay-data="{field:'user',
                templet:function (d) {
                    return d.user.username;
                }
            }">下单人</th>
            <th lay-data="{field:'business',
                templet:function (d) {
                    return d.business.businessName;
                }
            }">所属商家</th>
            <!--判断-->
            <th lay-data="{field:'myorderStatus',minWidth:110,sort: true,
                templet:function (d) {
                    if(d.myorderStatus == 1){
                        return '待发货';
                    }else if(d.myorderStatus == 2){
                        return '发货中';
                    }else if(d.myorderStatus == 3){
                        return '待评价';
                    }else if(d.myorderStatus == 4){
                        return '完成';
                    }else if(d.myorderStatus == 5){
                        return '取消订单';
                    }else if(d.myorderStatus == 0){
                        return '待付款';
                    }

                }
            }">订单状态</th>
            <th lay-data="{field:'wuliuNumber',minWidth:110}">物流编号</th>
            <th lay-data="{field:'wuliuGongshi',minWidth:110,
                templet:function (d) {
                    if(d.wuliuGongshi == 'SFEXPRESS'){
                        return '顺丰';
                    }else if(d.wuliuGongshi == 'sto'){
                        return '申通';
                    }else if(d.wuliuGongshi == 'yto'){
                        return '圆通';
                    }else if(d.wuliuGongshi == 'zto'){
                        return '中通';
                    }else if(d.wuliuGongshi == 'YUNDA'){
                        return '韵达';
                    }else if(d.wuliuGongshi == 'HTKY'){
                        return '百世快递';
                    }else if(d.wuliuGongshi == 'EMS'){
                        return 'EMS';
                    }else if(d.wuliuGongshi == null){
                        return '';
                    }
                }
            }">物流公司</th>
            <th lay-data="{field:'myorderTime',sort: true}">下单时间</th>
            <th lay-data="{field:'myorderTotalPrice',minWidth:110,  totalRow: true,sort: true,templet:function(d){
                return Number(d.myorderTotalPrice).toFixed(2);
            }}">订单总价</th>
            <!--最后一列操作列，有修改或删除的权限就显示这列，否者不显示，通过Vue实现-->
            <th v-if="isShow" lay-data="{field:'opeartion', width:170,fixed: 'right', toolbar: '#barDemo'}">操作</th>
        </tr>
        </thead>
    </table>
</div>

<!-----------这里是修改弹出层的表单信息,表单的id用于表单的选择，style是在本页隐藏，只有点击编辑才会弹出---------->
<div class="layui-row" id="popUpdateUser" style="display:none;">
    <div style="width: 780px;margin-left: 10px">
        <div class="lineDiv">
            <span class="leftTitle">订单编号</span><span id="myOrderCode" class="rigthContent"></span>
        </div>
        <div class="lineDiv">
            <span class="leftTitle">父订单编号</span><span id="allorderNumber" class="rigthContent"></span>
        </div>
        <div class="lineDiv">
            <span class="leftTitle">订单状态</span><span id="myOrderStatus" class="rigthContent"></span>
        </div>
        <div class="lineDiv">
            <span class="leftTitle">下单人</span><span id="myOrderUser" class="rigthContent"></span>
        </div>
        <div class="lineDiv">
            <span class="leftTitle">收货信息</span>
            <span class="rigthContent">（收货人）</span>
            <span id="acceptUser"></span>
            <span class="rigthContent">（手机号）</span>
            <span id="acceptTel"></span>
            <span class="rigthContent">（地址）</span>
            <span id="acceptAddress"></span>
        </div>
        <div class="lineDiv">
            <span class="leftTitle">商品信息</span>
        </div>
        <div class="lineDiv" style="margin-top: 10px">
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>商品数量</th>
                        <th>商品总价</th>
                        <th>商品积分</th>
                        <th>商品图片</th>
                        <th>商品评论</th>
                    </tr>
                </thead>
                <tbody id="tbody">

                </tbody>
            </table>
        </div>
        <div class="lineDiv">
            <span class="leftTitle">订单总价</span><span id="myOrderTotalPrice" class="rigthContent"></span>
        </div>
        <div class="lineDiv">
            <span class="leftTitle">快递信息</span>
            <span class="rigthContent">（快递公司）</span>
            <span class="rigthContent" id="wuliuGongshi"></span>
            <span class="rigthContent">（快递单号）</span>
            <span class="rigthContent" id="wuliuNumber"></span>
        </div>
        <div style="margin:30px 700px 30px">
            <button id="closeBtn" type="button" class="layui-btn layui-btn-sm">关闭</button>
        </div>
    </div>
</div>

<!-------------------------------------这里是弹出发货信息------------------------------------------------>
<div class="layui-row" id="popSendProduct" style="display:none;">
    <form class="layui-form" id="sendProductForm" action="" lay-filter="updateFormFilter">
        <input name="myorderId" id="myorderId" hidden>
        <input name="myorderStatus"  hidden>
        <div class="layui-form-item" style="margin-top: 20px;width: 300px">
            <label class="layui-form-label">快递公司</label>
            <div class="layui-input-block">
                <select name="wuliuGongshi" lay-filter="aihao">
                    <option value="SFEXPRESS">顺丰</option>
                    <option value="sto">申通</option>
                    <option value="yto">圆通</option>
                    <option value="zto">中通</option>
                    <option value="YUNDA">韵达</option>
                    <option value="HTKY">百世快递</option>
                    <option value="EMS">EMS</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">快递单号</label>
            <div class="layui-input-block">
                <input type="text" name="wuliuNumber" lay-verify="notNull" autocomplete="off" placeholder="请输入快递单号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="width: 300px">
            <div class="layui-input-block">
                <input type="button" class="layui-btn" lay-submit="sendProduct" lay-filter="sendProduct" value="立即提交">
            </div>
        </div>
    </form>
</div>

<script src="/houtai/layuiadmin/layui/layui.js" charset="utf-8"></script>
<script src="/houtai/layuiadmin/layui/lay/modules/util.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<!--转换时间格式、数字转字符串-->
<script type="text/javascript">
    /**
     * 将"2018-05-19T08:04:52.000+0000"这种格式的时间转化为正常格式\
     */
    function timeFormat(time) {
        var d = new Date(time);

        var year = d.getFullYear();       //年
        var month = d.getMonth() + 1;     //月
        var day = d.getDate();            //日

        var hh = d.getHours();            //时
        var mm = d.getMinutes();          //分
        var ss = d.getSeconds();           //秒

        var clock = year + "/";

        if (month < 10)
            clock += "0";

        clock += month + "/";

        if (day < 10)
            clock += "0";

        clock += day + " ";

        if (hh < 10)
            clock += "0";

        clock += hh + ":";
        if (mm < 10) clock += '0';
        clock += mm + ":";

        if (ss < 10) clock += '0';
        clock += ss;
        return (clock);
    };
</script>
<script>

    //定义四个全局变量用于是否显示增加、删除、修改按钮的权限验证
    var insert = false;//是否具备新增权限，默认不具备
    var del= false;
    var update= false;
    var isShow=false;
    //利用Vue判断是否具备每一行的删除或者修改权限
    var vue = new Vue({
        el:"#content",
        data:{
            buttons:[]
        },
        beforeCreate:function(){
            $.ajax({
                url : "/houtai/page/order/orderlist",
                type : "get",
                dataType : "json",
                success : function(data) {
                    if(data.message=="success"){

                    }else if(data.message == "premissionException"){
                        location.href = "/houtai/page/exception/NoPremission.html";
                    }else{
                        location.href = "/houtai/page/exception/500.html";
                    }
                }
            });
        },
        computed:{
            isShow:function () {
                var _this = this;
                var delbtn=false;
                var updatebtn=false;
                //获取当前网页地址
                var url = location.pathname;
                $.ajax({
                    url: "/houtai/adminuser/buttons",
                    type: "get",
                    async: false,
                    data: {
                        url: url
                    },
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        _this.buttons = data.li;
                        for(var i=0;i<_this.buttons.length;i++){
                            if(_this.buttons[i].menuUrl.indexOf("insert")!=-1){
                                insert = true;
                                break;
                            }
                        }
                        for(var i=0;i<_this.buttons.length;i++){
                            if(_this.buttons[i].menuUrl.indexOf("delete")!=-1){
                                del = true;
                                isShow = true;
                                delbtn = true;
                                break;
                            }
                        }
                        for(var i=0;i<_this.buttons.length;i++){
                            if(_this.buttons[i].menuUrl.indexOf("update")!=-1){
                                update = true;
                                isShow = true;
                                updatebtn =  true;
                                break;
                            }
                        }

                    }
                });

                if(delbtn||updatebtn){
                    return true;
                }else{
                    return false;
                }

            }
        }
    });


    layui.use(['table','jquery','laypage','util','laydate','form'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var util = layui.util;
        var laydate = layui.laydate;
        var form = layui.form;
        //监听行单击/双击事件（双击事件为：rowDouble,单击事件为：row，参数为表格lay-filter的值）
        table.on('rowDouble(filter)', function(obj){

        });
        //验证表单内容
        form.verify({
            notNull:function (value, item) {
                if(value == null || value.trim() == ''){
                    return "快递单号不能为空";
                }
            }
        });
        //加载日期选择插件
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#endDate'
        });
        //刷新表单
        form.render();
        //监听顶部工具栏事件
        table.on('toolbar(filter)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            switch(obj.event){
                case 'insert':
                    layer.msg('添加');
                    break;

                //点击批量删除执行以下代码
                case 'getCheckData':
                    if(data.length < 1){
                        layer.msg("至少选择一行哦!!!");
                    }else{
                        layer.confirm('真的删除行么', function(index){
                            layer.close(index);
                            var data = checkStatus.data;
                            var uids = new Array();
                            for(var i = 0;i < data.length;i++){
                                uids.push(data[i].myorderId);
                            }
                            console.log(uids);
                            var s = JSON.stringify(uids);
                            console.log(s);
                            $.ajax({
                                url:"/houtai/page/order/delete",
                                data:{oid:s},
                                type:"post",
                                dataType:"json",
                                success:function (data) {
                                    if(data.message == "success"){
                                        layer.msg("删除成功",{icon: 6});
                                        //重载表格
                                        $(".layui-laypage-btn").click();
                                    }else if(data.message == "premissionException"){
                                        location.href = "/houtai/page/exception/NoPremission.html";
                                    }else if(data.message == "serverException"){
                                        location.href = "/houtai/page/exception/500.html";
                                    }else{
                                        layer.msg("删除失败", {icon: 5});
                                    }
                                }
                            })
                        });
                    }

                    break;
            };
        });

        $("#closeBtn").click(function () {
            layer.closeAll();
        })

        //监听每一行工具条
        table.on('tool(filter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            console.log(data);
            if(layEvent === 'detail'){//查看
                //do somehing
            } else if(layEvent === 'singleDel'){ //删除
                if(data.myorderStatus == 0){
                    layer.msg("该订单尚未付款，不能发货");
                }else if(data.myorderStatus == 1){
                    form.val('updateFormFilter', {
                        "myorderId": data.myorderId
                    });
                    //开起弹出层
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        title: "订单详情",
                        area: ['400px', '300px'],//设置弹出层尺寸

                        content: $("#popSendProduct")//引用的弹出层的页面层的方式加载修改界面表单

                    });
                }else if(data.myorderStatus == 2){
                    layer.confirm('该订单已发货，是否更改发货信息？', function(index){
                        layer.close(index);
                        //向服务端发送删除指令
                        form.val('updateFormFilter', {
                            "myorderId": data.myorderId
                        });
                        //开起弹出层
                        layer.open({
                            //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                            type: 1,
                            title: "订单详情",
                            area: ['400px', '300px'],//设置弹出层尺寸
                            content: $("#popSendProduct")//引用的弹出层的页面层的方式加载修改界面表单

                        });
                    });
                }else{
                    layer.msg("该订单尚已确认收货，不能更改物流信息");
                }

            } else if(layEvent === 'singleUpdate'){ //编辑
                $.ajax({
                    url:"/houtai/page/order/selectById",
                    data:{myOrderId:data.myorderId},
                    type:"post",
                    async: false,
                    dataType:"json",
                    success:function (data) {
                        console.log("这是myOrder-------------------------")
                        console.log(data);
                        if(data.message == "success"){
                            var order = data.obj;
                            $("#myOrderCode").text(order.myorderNumber);
                            if(order.myorderStatus == 0){
                                $("#myOrderStatus").text("待付款");
                            }else if(order.myorderStatus == 1){
                                $("#myOrderStatus").text("待发货");
                            }else if(order.myorderStatus == 2){
                                $("#myOrderStatus").text("发货中");
                            }else if(order.myorderStatus == 3){
                                $("#myOrderStatus").text("待评价");
                            }else if(order.myorderStatus == 4){
                                $("#myOrderStatus").text("取消订单");
                            }else if(order.myorderStatus == 5){
                                $("#myOrderStatus").text("交易完成");
                            };
                            $("#myOrderUser").text(order.user.username);
                            $("#acceptUser").text(order.userAddress.name);
                            $("#acceptTel").text(order.userAddress.tel);
                            $("#acceptAddress").text(order.userAddress.addr);

                            var orderDetail = order.myorderDetails;
                            console.log("这是orderDetail-----------------------------")
                            console.log(orderDetail);
                            var html = "";
                            console.log(html);
                            for(var i = 0;i < orderDetail.length;i++){
                                var commentDesc = "待评价";
                                if(orderDetail[i].comment != null){
                                    commentDesc = orderDetail[i].comment.commentDesc;
                                }
                                html+="<tr>"+
                                    "<td>"+orderDetail[i].product.productName+"</td>"+
                                    "<td>"+orderDetail[i].productPrice+"</td>"+
                                    "<td>"+orderDetail[i].productNum+"</td>"+
                                    "<td>"+orderDetail[i].totalPrice+"</td>"+
                                    "<td>"+orderDetail[i].odIntegral+"</td>"+
                                    "<td><img style='height: 50px;width: 50px' src="+orderDetail[i].product.productImg+"></td>"+
                                    "<td>"+commentDesc+"</td>"+
                                    "</tr>";
                            }
                            console.log(html);
                            $("#tbody").html(html);
                            $("#myOrderTotalPrice").text(order.myorderTotalPrice);

                            var allOrder = order.allorder;
                            $("#allorderNumber").text(allOrder.allorderNumber);
                            if(allOrder.cupon != null){
                                $("#myOrderCupon").text(allOrder.cupon.cuponContent);
                            }else{
                                $("#myOrderCupon").text("未使用优惠券");
                            }

                            if(order.wuliuGongshi == 'SFEXPRESS'){
                                $("#wuliuGongshi").text("顺丰");
                            }else if(order.wuliuGongshi == 'sto'){
                                $("#wuliuGongshi").text("申通");
                            }else if(order.wuliuGongshi == 'yto'){
                                $("#wuliuGongshi").text("圆通");
                            }else if(order.wuliuGongshi == 'zto'){
                                $("#wuliuGongshi").text("中通");
                            }else if(order.wuliuGongshi == 'YUNDA'){
                                $("#wuliuGongshi").text("韵达");
                            }else if(order.wuliuGongshi == 'HTKY'){
                                $("#wuliuGongshi").text("百世快递");
                            }else if(order.wuliuGongshi == 'EMS'){
                                $("#wuliuGongshi").text("EMS");
                            }else if(order.wuliuGongshi == null){
                                $("#wuliuGongshi").text("暂无");
                            }
                            if(order.wuliuNumber != null && order.wuliuNumber != ''){
                                $("#wuliuNumber").text(order.wuliuNumber);
                            }else{
                                $("#wuliuNumber").text("暂无");
                            }

                        }
                    }
                })

                //开起弹出层
                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "订单详情",
                    area: ['800px', '600px'],//设置弹出层尺寸

                    content: $("#popUpdateUser")//引用的弹出层的页面层的方式加载修改界面表单
                });
                // 获取表单区域所有值
                var data1 = form.val("updateForm");
            }
        });
        //监听表单提交，上述的submit()中的值为事件过滤器的值
        form.on('submit(sendProduct)', function(data){
            // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            if(data.field.wuliuNumber != null && data.field.wuliuNumber != ''){
                $.ajax({
                    url:"/houtai/page/order/sendProduct",
                    data:$("#sendProductForm").serialize(),
                    type:"post",
                    dataType:"json",
                    success:function (data) {
                        if(data.message == "success"){
                            layer.msg("提交成功");
                            layer.closeAll();
                            table.reload('test', {
                                url: '/houtai/page/order/list',
                                page: {
                                    curr: $(".layui-laypage-em").next().html() //从当前页开始重载表格
                                }
                            });
                        }else if(data.code == 600){
                            layer.msg(data.message);
                        }
                        else{
                            layer.msg("提交失败，请重新提交");
                        }
                    }
                })
            }
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //设置搜索框查询条件
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                var str = $("#serachForm").serialize();
                //执行重载
                table.reload('test', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        myorderNumber:$("#myorderNumber").val(),
                        username:$("#username").val(),
                        orderStatus:$("#orderStatus").val(),
                        startDate:$("#startDate").val(),
                        endDate:$("#endDate").val()
                    }
                }, 'data');
            }
        };

        //监听搜索框提交按钮
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听修改框提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>

</body>
</html>